<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Bell, ChatDotRound, Delete, Check } from '@element-plus/icons-vue'

// 消息列表数据
const messages = ref([])
const activeMessage = ref(null)
const loading = ref(false)

// 模拟获取消息列表
const fetchMessages = async () => {
  loading.value = true
  try {
    // TODO: 替换为实际的API调用
    // const response = await messageService.getMessages()
    // messages.value = response.data
    
    // 临时模拟数据
    messages.value = [
      {
        id: 1,
        title: '订单发货通知',
        content: '您的订单 #12345 已发货，预计3-5天送达。',
        time: '2024-03-20 10:30',
        isRead: false,
        type: 'order'
      },
      {
        id: 2,
        title: '系统通知',
        content: '系统将于今晚22:00-23:00进行维护升级。',
        time: '2024-03-19 15:45',
        isRead: true,
        type: 'system'
      }
    ]
  } catch (error) {
    ElMessage.error('获取消息列表失败')
  } finally {
    loading.value = false
  }
}

// 标记消息为已读
const markAsRead = async (message) => {
  try {
    // TODO: 替换为实际的API调用
    // await messageService.markAsRead(message.id)
    message.isRead = true
    ElMessage.success('已标记为已读')
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

// 删除消息
const deleteMessage = async (message) => {
  try {
    await ElMessageBox.confirm('确定要删除这条消息吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // TODO: 替换为实际的API调用
    // await messageService.deleteMessage(message.id)
    messages.value = messages.value.filter(m => m.id !== message.id)
    if (activeMessage.value?.id === message.id) {
      activeMessage.value = null
    }
    ElMessage.success('删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

// 选择消息
const selectMessage = (message) => {
  activeMessage.value = message
  if (!message.isRead) {
    markAsRead(message)
  }
}

onMounted(() => {
  fetchMessages()
})
</script>

<template>
  <div class="messages-container">
    <div class="messages-header">
      <h2><el-icon><Bell /></el-icon> 我的消息</h2>
    </div>
    
    <div class="messages-content">
      <!-- 消息列表 -->
      <div class="messages-list">
        <el-scrollbar height="calc(100vh - 200px)">
          <div v-loading="loading">
            <div
              v-for="message in messages"
              :key="message.id"
              class="message-item"
              :class="{ active: activeMessage?.id === message.id, unread: !message.isRead }"
              @click="selectMessage(message)"
            >
              <div class="message-item-header">
                <span class="message-title">{{ message.title }}</span>
                <span class="message-time">{{ message.time }}</span>
              </div>
              <div class="message-item-content">
                {{ message.content }}
              </div>
              <div class="message-item-footer">
                <el-button
                  v-if="!message.isRead"
                  type="primary"
                  size="small"
                  @click.stop="markAsRead(message)"
                >
                  <el-icon><Check /></el-icon> 标记已读
                </el-button>
                <el-button
                  type="danger"
                  size="small"
                  @click.stop="deleteMessage(message)"
                >
                  <el-icon><Delete /></el-icon> 删除
                </el-button>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>

      <!-- 消息详情 -->
      <div class="message-detail">
        <template v-if="activeMessage">
          <div class="message-detail-header">
            <h3>{{ activeMessage.title }}</h3>
            <span class="message-time">{{ activeMessage.time }}</span>
          </div>
          <div class="message-detail-content">
            {{ activeMessage.content }}
          </div>
        </template>
        <div v-else class="message-detail-empty">
          <el-icon><ChatDotRound /></el-icon>
          <p>请选择一条消息查看详情</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.messages-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.messages-header {
  margin-bottom: 20px;
}

.messages-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #303133;
}

.messages-content {
  display: flex;
  gap: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 200px);
}

.messages-list {
  width: 400px;
  border-right: 1px solid #ebeef5;
}

.message-item {
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: all 0.3s;
}

.message-item:hover {
  background-color: #f5f7fa;
}

.message-item.active {
  background-color: #ecf5ff;
}

.message-item.unread {
  background-color: #f0f9ff;
}

.message-item-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.message-title {
  font-weight: bold;
  color: #303133;
}

.message-time {
  font-size: 12px;
  color: #909399;
}

.message-item-content {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.message-item-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.message-detail {
  flex: 1;
  padding: 20px;
}

.message-detail-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.message-detail-header h3 {
  margin: 0 0 10px 0;
  color: #303133;
}

.message-detail-content {
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
}

.message-detail-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.message-detail-empty .el-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* 暗黑模式适配 */
:root.dark .messages-content {
  background: #1d1e1f;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
}

:root.dark .messages-header h2 {
  color: #e5eaf3;
}

:root.dark .message-item {
  border-bottom-color: #363637;
}

:root.dark .message-item:hover {
  background-color: #2b2b2b;
}

:root.dark .message-item.active {
  background-color: #1a1a1a;
}

:root.dark .message-item.unread {
  background-color: #1a1a1a;
}

:root.dark .message-title {
  color: #e5eaf3;
}

:root.dark .message-item-content {
  color: #a3a6ad;
}

:root.dark .message-detail-header {
  border-bottom-color: #363637;
}

:root.dark .message-detail-header h3 {
  color: #e5eaf3;
}

:root.dark .message-detail-content {
  color: #a3a6ad;
}
</style> 